<template>
    <div class="container">
       <div> {{ prop.name }}</div>
       <div @click="addFriend(prop.name)"><button>add</button></div>
    </div>
</template>
<script setup lang="ts">

const prop = defineProps<{
    name:string
}>()
const emit = defineEmits<{
    (e:'addfriend',friendName:string):void
}>()

const addFriend = (friendName:string) => {
    emit('addfriend',friendName)
}
</script>
<style scoped>
.container {
    padding: 3px;
    background-color: rgb(255, 226, 226);
    /* width: 100px; */
    margin: 2px;
    overflow: hidden;
    border-radius: 5px;
}
</style>